<template>
  <aside class="sidebar" :style="{ width: isSidebarVisible ? sidebarWidth + 'px' : '0' }">
    <Transition name="sidebar-content">
      <div v-if="isSidebarVisible" class="sidebar-inner">
        <div class="sidebar-header">
          <div class="logo">
            <span>AI Chat</span>
          </div>
          <button @click="$emit('toggle')" class="toggle-button">收起侧边栏</button>
        </div>

        <div class="sidebar-content">
          <ul class="sidebar-menu">
            <li class="sidebar-menu-item">
              <i>🗂</i>
              <span>历史记录</span>
            </li>
            <li class="sidebar-menu-item">
              <i>⚙️</i>
              <span>设置</span>
            </li>
            <li class="sidebar-menu-item">
              <i>📚</i>
              <span>知识库</span>
            </li>
            <li class="sidebar-menu-item" :class="{ 'disabled': !isLoggedIn }">
              <a 
                :href="isLoggedIn ? '/question' : 'javascript:void(0)'" 
                :target="isLoggedIn ? '_blank' : ''"
                class="mindmap-link"
                @click="!isLoggedIn && handleUnauthorizedClick('生成题目')"
              >
                <i>📝</i>
                <span>生成题目</span>
              </a>
            </li>
            <li class="sidebar-menu-item" :class="{ 'disabled': !isLoggedIn }">
              <a 
                :href="isLoggedIn ? 'https://openfiles.online/viewer/XMIND' : 'javascript:void(0)'" 
                :target="isLoggedIn ? '_blank' : ''"
                class="mindmap-link"
                @click="!isLoggedIn && handleUnauthorizedClick('思维导图展示')"
              >
                <i>🗺️</i>
                <span>思维导图展示</span>
              </a>
            </li>
          </ul>

          <div class="sidebar-bottom">
            <div 
              class="user-profile" 
              :class="{ 'clickable': !isLoggedIn }"
              @click="!isLoggedIn && emit('login')"
            >
              <div class="user-avatar">
                <div class="avatar-placeholder" :class="{ 'logged-out': !isLoggedIn }"></div>
              </div>
              <span class="user-name">{{ userEmail || '未登录' }}</span>
              <button v-if="isLoggedIn" @click.stop="$emit('logout')" class="logout-button">
                退出登录
              </button>
            </div>
            <div class="sidebar-footer">
              <div class="divider"></div>
              <p class="version-text">版本号 v1.0.0</p>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </aside>
</template>

<script setup>
import { ref } from 'vue';

const sidebarWidth = ref(280);
const props = defineProps({
  isSidebarVisible: Boolean,
  userEmail: String,
  isLoggedIn: Boolean
});

const emit = defineEmits(['toggle', 'logout', 'login']);

const handleUnauthorizedClick = (feature) => {
  emit('login');
};
</script>

<style scoped>
.sidebar {
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.05);
  border-right: 1px solid #eee;
}

.sidebar-inner {
  width: v-bind('sidebarWidth + "px"');
  min-width: v-bind('sidebarWidth + "px"');
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #007aff;
  font-size: 18px;
}

.logo::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: #007aff;
  border-radius: 6px;
  flex-shrink: 0;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.sidebar-menu-item {
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #444;
}

.sidebar-menu-item:hover {
  background: rgba(0, 122, 255, 0.08);
}

.sidebar-bottom {
  margin-top: auto;
  width: 100%;
}

.user-profile {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  margin-bottom: 16px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  margin-right: 12px;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #007aff;
  opacity: 0.8;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px; /* 限制文本宽度，防止超长邮箱地址破坏布局 */
}

.sidebar-footer {
  padding: 0 8px;
}

.divider {
  height: 1px;
  background: #eee;
  margin: 8px 0;
}

.version-text {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin: 0;
}

.toggle-button {
  background: transparent;
  color: #666;
  border: 1px solid #e0e0e0;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.toggle-button:hover {
  background: #f0f0f0;
  border-color: #d0d0d0;
}

.logout-button {
  background: transparent;
  border: none;
  color: #ff4d4f;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: auto;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.logout-button:hover {
  background-color: rgba(255, 77, 79, 0.1);
}

.mindmap-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mindmap-link:hover {
  color: inherit;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.disabled a {
  cursor: not-allowed;
}

.disabled:hover {
  background: none !important;
}
.user-profile.clickable {
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-profile.clickable:hover {
  background: rgba(0, 0, 0, 0.06);
}
</style>